<template>
  <div class="lin_admin_dashboard">
    <div class="sidebar">
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          @open="handleOpen"
          @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><IconMenu /></el-icon>
            <span>Dashboard</span>
          </template>
          <el-menu-item-group>
            <template #title><span>Dashboard</span></template>
            <el-menu-item index="1-1">Analysis</el-menu-item>
            <el-menu-item index="1-2" @click="selectComponent('Monitor')">Monitor</el-menu-item>
            <el-menu-item index="1-3" @click="selectComponent('Workplace')">Workplace</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><IconMenu /></el-icon>
            <span>Management</span>
          </template>
          <el-menu-item-group>
            <template #title><span>User Management</span></template>
            <el-menu-item index="2-1" @click="selectComponent('Users')">Users</el-menu-item>
            <el-menu-item index="2-2">Roles</el-menu-item>
            <el-menu-item index="2-3">Permissions</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><IconMenu /></el-icon>
            <span>Settings</span>
          </template>
          <el-menu-item-group>
            <template #title><span>Settings</span></template>
            <el-menu-item index="3-1">Users</el-menu-item>
            <el-menu-item index="3-2">Roles</el-menu-item>
            <el-menu-item index="3-3">Permissions</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>

      </el-menu>
    </div>

    <div class="lin_admin_dashboard_content">
      <component :is="tabs[currentComponent]"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {Menu as IconMenu, DataBoard,} from '@element-plus/icons-vue';
import Workplace from "~/ components/admin/dashboard/Workplace.vue";
import Monitor from "~/ components/admin/dashboard/Monitor.vue";
import Users from "~/ components/admin/users/Users.vue";

const  tabs = {
  Workplace,
  Monitor,
  Users
}

const isCollapse = ref(false);
const currentComponent = ref('Users');


const selectComponent = (componentName: string) => {
  currentComponent.value = componentName;
  console.log(`Switching to component: ${componentName}`);
};

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style scoped>
.lin_admin_dashboard {
  display: flex; /* 使用Flex布局 */
}

.sidebar {
  position: fixed;
  border-top: 1px solid rgb(223, 222, 222);
  overflow-y: auto;
  margin-top: 60px;
  z-index: 1;
}

.el-menu-vertical-demo {
  padding-top: 50px; /* 菜单顶部间距 */
  min-height: 100vh; /* 高度为视口高度 */
}

.lin_admin_dashboard_content {
  margin-left: 250px; /* 左边留出给侧边栏的空间 */
  padding-top: 100px;
  flex-grow: 1; /* 内容区占用剩余空间 */
  overflow-y: auto; /* 允许内容区滚动 */
}
</style>
